<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>数字化转型创意大赛决赛</title>
	<!-- import CSS -->
	<link rel="stylesheet" href="http://npm.elemecdn.com/mint-ui@2.2.13/lib/style.css">
	<link rel="stylesheet" href="/static/main.css">
</head>

<body>
	<div id="app" class="loadHide">
		<mt-header fixed title="数字化转型创意大赛决赛">
			<mt-button slot="left" onclick="location.href = '/logout'">退出</mt-button>
			<mt-button slot="right" onclick="location.href = '/gradeResult'">评分结果</mt-button>
		</mt-header>

		<div style="margin-top:50px;">
			<mt-loadmore :top-method="loadList" ref="loadmore">
				<div style='min-height:500px;'>

					<mt-cell v-for="item in list" :title="item.id + ':  ' +item.title">
						<mt-badge size="small" color="#888" v-if="item.statu == 0">不可评分</mt-badge>
						<mt-button @click="openGrade(item)" type="primary" v-if="item.statu == 1">评分</mt-button>
						<mt-button type="default" v-if="item.statu == 2">已评分</mt-button>
					</mt-cell>
				</div>

			</mt-loadmore>

		</div>


	</div>
</body>
<!-- import Vue before Mint UI -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- import JavaScript -->
<script src="http://npm.elemecdn.com/mint-ui@2.2.13/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
<script src="/static/common.js"></script>
<script>
	new Vue({
		el: '#app',
		data: {
			list: [

			]
		},
		methods: {
			openGrade: function (gradeItem) {
				if (gradeItem.statu == 2) {
					this.$toast('该作品已评分');
					return;
				}
				this.$indicator.open();
				location.href = '/grade?id=' + gradeItem.id;
			},
			loadList: function () {
				var vm = this;
				vm.$indicator.open();
				this.$http.get('/getInnovates').then(response => {
					vm.$indicator.close();
					vm.$refs.loadmore.onTopLoaded();
					if (response.body.success) {
						vm.list = response.body.data;
					}
					else {
						this.$toast(response.body.msg);
					}
				}, response => {
					this.$indicator.close();
					vm.$refs.loadmore.onTopLoaded();
					this.$toast('数据加载失败');
				});
			}
		},
		mounted: function () {
			document.getElementById('app').setAttribute('class', '');
			var vm = this;
			this.$nextTick(function () {
				vm.loadList();
			});
			
			setInterval(function(){
				vm.loadList();
			},5000);
		}
	});
</script>

</html>